<template >
  <transition name="fade-transform" mode="out-in">

  <div class="project-card__wrap" v-if="cardId">
    <div class="project-card" @click.stop="changeRoute(cardId)">
       <div class="project-card__left">
         <div class="project-card__header">
           <p class="title">{{cardName}}</p>
           <div class="icon-box" >
             <p class="icon1" v-if="cardView>=20">
               <yun-icon name="hot" size="12px" color="#fff"></yun-icon>
             </p>
             <p class="icon1" style="background-color: #00AAE6" v-if="priority>0">
               <yun-icon name="top" size="12px" color="#fff"></yun-icon>
             </p>

<!--             <p class="icon2">-->
<!--               <yun-icon name="like2" size="12px" color="#fff"></yun-icon>-->
<!--             </p>-->
           </div>
           <div class="label-box"  v-if="cardType===1">
             <p v-for="(val,index) in cardTags" :key="val.tagId">{{val.tagName}}</p>
           </div>
           <div class="label-box"  v-if="cardType===1">
             <p v-if="isMy&&status===-1" class="label-box__err">被锁定</p>
             <p v-if="isMy&&status===0" class="label-box__zero">待审核</p>
             <p v-if="isMy&&status===1" class="label-box__pass">审核通过</p>
           </div>
           <div class="label-box"  v-if="cardType===2">
             <p v-if="isMy&&status===-1" class="label-box__err">被锁定</p>
           </div>

         </div>
         <p class="project-card__body">
           {{cardIntro}}

         </p>
         <div class="project-card__footer" v-if="cardType!==3">
            <p class="info-left">
              {{cardUser}}<span>·</span>{{cardTime}}
            </p>
            <div class="info-right">
<!--              <div class="icon-box" v-if="cardStar">-->
<!--                <yun-icon name="star" size="12px" vertical="top" color="#ccc"></yun-icon>-->
<!--                <span>{{cardStar}}</span>-->
<!--              </div>-->
              <div class="icon-box" v-if="praiseNum">
                <yun-icon name="like1" size="12px" vertical="top" color="#ccc"></yun-icon>
                <span>{{praiseNum}}</span>
              </div>
              <div class="icon-box"  v-if="cardView">
                <yun-icon name="view" size="12px" vertical="top" color="#ccc"></yun-icon>
                <span>{{cardView}}</span>
              </div>
            </div>
           <div class="label-box" v-if="cardType===2">
             <p v-for="(val,index) in cardTags" :key="val.tagId">{{val.tagName}}</p>
           </div>
         </div>
       </div>

      <div class="project-card__right" v-if="src&&src!=='无'">
        <img :src="src" alt="">
      </div>



    </div>
    <div class="project-card__abs" v-if="isMy&&status!==-1">
      <div class="container__abs">
        <div class="deleteButton" @click="showAlert(cardId)">
          <yun-icon name="delete" size="12px" pb="3px"></yun-icon>
        </div>
        <nuxt-link v-if="cardType===2" :to="{path:'/blog/release',query:{id:cardId}}" tag="div" class="editButton">
          <yun-icon name="edit" size="12px"></yun-icon>
        </nuxt-link>
        <nuxt-link v-if="cardType===1" :to="{path:'/project/release',query:{id:cardId}}" tag="div" class="editButton">
          <yun-icon name="edit" size="12px"></yun-icon>
        </nuxt-link>

      </div>
    </div>
  </div>

  </transition>
</template>


<script>


  import {dateConvert} from "../../action/utils/dataConvert";
  import config from '../../action/config'
  export default {
    name:'projectCard',

    props:{
      info:{
        type:Object,
        default: () => ({})
      },
      isMy:{
        type:Boolean,
        default:false
      }

    },
    data(){
      return{
        src:'',
        cardType:3,    //（props）1、项目  2、博客  3、资讯
        cardName:'',
        cardIntro:'',
        cardId:'',
        cardTags:[],
        cardTime:'',
        cardUser:'',
        status:0,
        cardStar:'',
        cardLike:'',
        cardView:'',
      }
    },
    created(){
      this.dateGet2Info();
    },
    computed:{
      cardState(){
       if(this.status===0){
         if(this.cardType===1){
           return '待审核'
         }
         if(this.cardType===2){

         }
       }
        if(this.status===1){

        }
        if(this.status===-1){

        }
      }
    },

    methods:{
      dateGet2Info(){
        let info = this.info;
        if(this.info.blogId){
          this.cardName = info.blogTitle;
          this.cardIntro = info.blogAbstract;
          this.cardId = info.blogId;
          this.src = info.cover;
          this.cardTags = info.tags;
          this.cardTime = dateConvert(info.createTime);
          this.cardView = info.viewNumber;
          this.cardUser = info.userNick;
          this.cardType = 2;
          this.status = info.status;
          this.praiseNum =info.praiseNum;
          this.priority = this.$route.query.type==='all'?info.priority:info.categoryPriority;
        }
        if(this.info.projectId){
          this.cardName = info.projectName;
          this.cardIntro = info.projectDescription;
          this.cardId = info.projectId;
          this.src = info.cover;
          this.cardView = info.viewNumber;

          this.cardTags = info.tags;
          this.cardTime = dateConvert(info.createTime);
          this.cardUser = info.author;
          this.cardType = 1;
          this.status = info.status;
          this.praiseNum =info.praiseNum;
          this.priority = info.priority||info.categoryPriority;


        }
        if(this.info.contentId){
          this.cardName = info.title;
          this.cardIntro = info.subTitle;
          this.cardId = info.contentId;
          this.cardView = info.viewNumber;
          this.src = info.cover;
          this.cardTime = dateConvert(info.createTime);
          this.cardUser = info.author;
          this.cardType = 3;

        }
        if(this.info.itemId&&this.info.itemType==="BLOG"){
          this.cardName = info.title;
          this.cardIntro = info.description;
          this.cardId = info.itemId;
          this.src = info.cover;
          this.cardView = info.viewNumber;
          this.cardTime = dateConvert(info.createTime);
          this.cardUser = info.author;
          this.cardType = 2;

        }
        if(this.info.itemId&&this.info.itemType==="PROJECT"){
          this.cardName = info.title;
          this.cardIntro = info.description;
          this.cardId = info.itemId;
          this.src = info.cover;
          this.cardView = info.viewNumber;
          this.cardTime = dateConvert(info.createTime);
          this.cardUser = info.author;
          this.cardType = 1;
        }
      },

      showAlert(id){
        this.$alert('确认删除？', '', {
          confirmButtonText: '确定',
          callback: action => {

            this.dataDeleteItem(id)
          }
        });
      },


      dataDeleteItem(id){
        if(this.cardType===1){
          this.$axios.$delete(config.api.delete.Project.delete+id).then((response)=>{
            if(response.code===0){
              this.cardId='';
              this.$message({
                type:'success',
                message:'项目删除成功!'
              })
            }else{
              this.$message({
                type:'warning',
                message:'项目删除失败!'
              })
            }
          })
        }else if(this.cardType===2){
          this.$axios.$delete(config.api.delete.Blog.delete+id).then((response)=>{
            if(response.code===0){
              this.cardId='';
              this.$message({
                type:'success',
                message:'博客删除成功!'
              })
            }else{
              this.$message({
                type:'warning',
                message:'博客删除失败!'
              })
            }
          })
        }
      },


      changeRoute(r){


        if(this.cardType===1){
          let routeUrl = this.$router.resolve({
            path: "/project/detail/"+r
          });

          window.open(routeUrl.href,'_blank')
        }
        if(this.cardType===2){
          let routeUrl = this.$router.resolve({
            path: "/blog/detail/"+r
          });

          window.open(routeUrl.href,'_blank')

        }
        if(this.cardType===3){
          let routeUrl = this.$router.resolve({
            path: "/news/detail/"+r
          });
          window.open(routeUrl.href,'_blank')
        }

      }


    },

  }
</script>


<style lang="scss">
  .project-card__wrap{

    .project-card{
      position:relative;
      @extend %cursorPointer;
      box-sizing:border-box;
      padding:21*$length 20*$length 24*$length;
      // width:938*$length;
      border-bottom:1px dashed #EFEFEF;
      @extend %flex-row-spb;
      align-items: flex-start;


      .project-card__left{
        .project-card__header{
          @extend %flex-row-spb;
          justify-content: flex-start;

          > .title{
            @extend %animate-transition;
            @include fontStyle(18,24,500,#222,left);
            height:auto;
          }
          > .icon-box{
            margin-left:15*$length;
            @extend %flex-row-spb;
            justify-content: flex-start;
            > .icon1{
              margin-right:10*$length;
              width:20*$length;
              height:20*$length;
              border-radius:2*$length;
              @extend %flex-column-center;
              background-color: #FF7474;
            }
            > .icon2{
              background-color: #F8A06F;
              margin-right:10*$length;
              width:20*$length;
              height:20*$length;
              border-radius:2*$length;
              @extend %flex-column-center;
            }
          }

          > .label-box{
            margin-left:5*$length;
            @extend %flex-row-spb;
            justify-content: flex-start;


            > p{
              margin-top: 8*$length;
              margin-bottom: 8*$length;
              margin-right:10*$length;
              padding:2*$length 8*$length;
              background-color: #F4F8FA;
              @include fontStyle(12,16,500,#999,center);
              @extend %animate-transition;
              @extend %cursorPointer;

              &:hover{
                background-color:rgba(0,170,230,.2);
                color:rgba(0,170,230,1);
              }
            }

            .label-box__err{
              color:#fff;
              background-color: #f11818;
            }
            .label-box__zero{
              color:#fff;
              background-color: #ff780091;
            }
            .label-box__pass{
              color:#f2f8f1;
              background-color: #74b56a;
            }

          }

        }

        .project-card__body{
          margin-top: 15*$length;
          @include fontStyle(14,24,500,#666,left);
          height:auto;
          > span{
            color:#00AAE6;
          }



        }

        .project-card__footer{
          margin-top: 14*$length;
          @extend %flex-row-spb;
          justify-content: flex-start;
          .info-left{
            @include fontStyle(12,16,500,#999,left);
            flex-shrink: 0;
            > span{
              margin: 0 3*$length;
            }
          }

          .info-right{
            margin-left: 38*$length;
            @extend %flex-row-spb;
            justify-content: flex-start;
            .icon-box{
              @extend %inlineBlockV;
              margin-right: 17*$length;
              > span{
                @include fontStyle(14,19,500,#ccc,left);
                margin-left:5*$length;
                vertical-align: top;

              }

            }
          }
          > .label-box{
            margin-left:5*$length;
            flex-wrap:wrap;
            @extend %flex-row-spb;
            justify-content: flex-start;

            > p{
              margin-top: 8*$length;
              margin-bottom: 8*$length;
              margin-right:10*$length;
              padding:2*$length 8*$length;
              background-color: #F4F8FA;
              @include fontStyle(12,16,500,#999,center);
              @extend %animate-transition;
              @extend %cursorPointer;

              &:hover{
                background-color:rgba(0,170,230,.2);
                color:rgba(0,170,230,1);
              }
            }
            .label-box__err{
              color:#fff;
              background-color: #f11818;
            }
            .label-box__zero{
              color:#fff;
              background-color: #ff780091;
            }
            .label-box__pass{
              color:#f2f8f1;
              background-color: #74b56a;
            }
          }
        }
      }
      .project-card__right{
        margin-left:12*$length;
        img{
          max-width:150*$length;
          max-height:93*$length;
          border-radius:4*$length;
          height:auto;
          @extend %animate-transition;
        }

      }



      &:hover{
        .project-card__header {
          .title {
            color:#00AAE6;
          }
        }
      }


    }
    background-color: #fff;
    position:relative;
    .project-card__abs{
      position: absolute;
      top:0;
      right:0;
      width:200*$length;
      height:100%;
      background-color: transparent;
      overflow: hidden;
      .container__abs{


        position: absolute;
        top:-100*$length;
        right:-100*$length;
        width:200*$length;
        height:200*$length;
        border-radius: 50%;
        background-color: rgba(34,34,34,.4);
        transform: rotateZ(90deg);
        transition: 1s all;
        opacity: 0;


        .deleteButton{
          position: absolute;
          bottom:30*$length;
          left:60*$length;
          width:30*$length;
          height:30*$length;
          border-radius: 50%;
          background-color:#ff4949;

          @extend %cursorPointer;
          @extend %flex-row-center;
          @extend %animate-transition;
          &:hover{
            filter:brightness(1.1);
            transform: scale(1.03);

          }
          i{
            color:#fff;
          }
        }
        .editButton{


          position: absolute;
          bottom:60*$length;
          left:30*$length;
          width:30*$length;
          height:30*$length;
          border-radius: 50%;
          background-color: #13ce66;

          @extend %cursorPointer;
          @extend %flex-row-center;
          @extend %animate-transition;

          &:hover{
            filter:brightness(1.1);
            transform: scale(1.03);
          }
          i{
            color:#fff;
          }
        }
      }
    }



    &:hover{
      .project-card__abs{
        .container__abs{
          transform: rotateZ(0deg);
          opacity: 1;
        }
      }
    }
  }


</style>
